<!--
* author: gaohailan
* created: 2018/8/21
* describe: 空白页面
-->
<template>
  <div class="empty-page">
    <div v-if="emptyType==0">
      <img :src="empty()" />
      <p :class="{'change':(txtColor)}">找不到你要的内容啊～</p>
    </div>
    <div v-if="emptyType==1">
      <img :src="error()" />
      <p :class="{'change':(txtColor)}">数据加载失败～</p>
    </div>
    <div v-if="emptyType==2">
      <img :src="network()" />
      <p :class="{'change':(txtColor)}">网络出问题了～</p>
    </div>
    <div v-if="emptyType == 3">
      <img :src="empty()" />
      <p :class="{ change: txtColor }">暂无评论，请对课程进行评论～</p>
    </div>
    <div v-if="emptyType == 4">
      <img :src="empty()" />
      <p :class="{ change: txtColor }">暂无评论，快参与评论吧～</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmptyPage',
  props: ['emptyType', 'txtColor'],
  data() {
    return {
      theme: localStorage.getItem('themeColor') || '',
      empty: () => {
        return this.theme != '' ? require('@/assets/images/' + this.theme + '/base/ic_empty.png') : require('@/assets/images/base/ic_empty.png')
      },
      error: () => {
        return this.theme != '' ? require('@/assets/images/' + this.theme + '/base/ic_error.png') : require('@/assets/images/base/ic_error.png')
      },
      network: () => {
        return this.theme != '' ? require('@/assets/images/' + this.theme + '/base/ic_no_network.png') : require('@/assets/images/base/ic_no_network.png')
      }
    }
  }
}
</script>

<style lang="scss">
.empty-page {
  position: absolute;
  top: 48%;
  left: 50%;
  margin-left: rem(-210);
  margin-top: rem(-150);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: rem(420);
  min-width: rem(426);
  z-index: 9;
  div {
    img {
      width: rem(426);
      // height: rem(298);
      display: block;
      margin: 0 auto;
    }
    p {
      margin-top: rem(16);
      font-size: rem(26);
      text-align: center;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
    .change {
      color: $colorWhite;
    }
  }
}
</style>
